<template>
    <div class="toast" v-if="isShow">
        <div class="title">{{ text }}</div>
        <div class="content">主体</div>
        <div class="footer" @click="close">关闭</div>
    </div>
</template>
<script>
export default {
    name: "Toast",
    data(){
        return {
            text: '内容',
            isShow: true,
            duration: 1500
        }
    },
    methods: {
        close(){
            this.isShow = false;
        }
    }
}
</script>
<style lang="less" scoped>
.toast{
    width: 300px;
    position: absolute;
    left: 50%;
    top: 50%;
    border: 1px solid red;
    border-radius: 0.2rem;
    .title{
        padding-left: 10px;
        background: plum;
    }
    .content{
        padding-left: 10px;
    }
    .footer{
        padding-right: 10px;
        text-align: right;
        cursor: pointer;
    }
}
</style>